<template>
	<div class="perlogin-totle">
		<!-- 头部 -->
		<div class="perlogin-title">
			<img class="perlogin-shezhi" src="../assets/shezhi.png"/>
			<span>我的</span>
			<img class="perlogin-xiaoxi" src="../assets/xiaoxi.png" />
		</div>
		<div>
			
		<!-- 头像栏 -->
		<div class="perlogin-touxiang">
			<img class="perlogin-photo" src="../assets/usertou.jpg" />
			<router-link to="/Login">
				<button class="perlogin-anniu">注册/登录</button>
			</router-link>
			<img class="perlogin-more" src="../assets/hwpush_ic_toolbar_advance.png"/>
			
			
		</div>
		
		<!-- 云同步 签到 -->
		<div class="perlogin-firstbox">
			<div class="perlogin-cloud">
				<img src="../assets/cloud.png"/>
				<span>云同步</span>
			</div>
			<div class="perlogin-qinadao">
				<img src="../assets/qiandao.png"/>
				<span>签到</span>
			</div>
		</div>
		
		<!--会员中心 我的钱包 我的积分  -->
		<div class="perlogin-secondbox">
			<div class="perlogin-firstline">
				<img class="perlogin-huiyuan" src="../assets/huangguan.png"/>
				<span>会员中心</span>
				<img class="perlogin-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="perlogin-secondline">
				<img class="perlogin-qianbao" src="../assets/qianbao.png"/>
				<span>我的钱包</span>
				<img class="perlogin-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="perlogin-thirdline">
				<img class="perlogin-jingxuan" src="../assets/bazi.png"/>
				<span>鱼仔精选</span>
				<img class="perlogin-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
		</div>
		
		<!-- /* 主题皮肤 心愿存钱 周期记账 */ -->
		<div class="perlogin-thirdbox">
			<div class="perlogin-fourthline">
				<img class="perlogin-pifu" src="../assets/yifu.png"/>
				<span>主题皮肤</span>
				<img class="perlogin-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="perlogin-fifthline">
				<img class="perlogin-cunqian" src="../assets/mofabang.png"/>
				<span>心愿存钱</span>
				<img class="perlogin-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="perlogin-sixthline">
				<img class="perlogin-jzhouq" src="../assets/shizhong.png"/>
				<span>周期记账</span>
				<img class="perlogin-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
		</div>
		
		<!-- 帮助与反馈 爱的鼓励 -->
		<div class="perlogin-fourthbox">
			<div class="perlogin-seventhline">
				<img class="perlogin-fankui" src="../assets/liuyan.png"/>
				<span>帮助与反馈</span>
				<img class="perlogin-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
			<div class="perlogin-eighthline">
				<img class="perlogin-guli" src="../assets/xin.png"/>
				<span>爱的鼓励</span>
				<img class="perlogin-morea" src="../assets/hwpush_ic_toolbar_advance.png"/>
			</div>
		</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
*{
	margin: 0px;
	padding: 0px;
}
.perlogin-totle{
	background-color: #F6F6F6;
	border: 1px solid transparent;
	box-sizing: content-box;
	height: 100%;
}
/* 顶部栏 */
.perlogin-title{
	position: fixed;
	top: 0;
	width: 100%;
	height: 40px;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content:center;
	border-bottom: 1px solid #DCDCDC;
}
.perlogin-shezhi{
	height: 26px;
	width: 26px;
	margin-left: 5px;
}
.perlogin-title>span{
	font-size: 20px;
	width: calc(100% - 66px);
}
.perlogin-xiaoxi{
	height: 30px;
	width: 30px;
	margin-right: 5px;
}

/* 头像栏 */
.perlogin-touxiang{
	margin-top: 40px;
	height: 90px;
	width: 100%;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
}
.perlogin-photo{
	height: 50px;
	width: 50px;
	border-radius:50%;
	margin-right: 5px;
	margin-left: 5px;
}
.perlogin-anniu{
	margin-left: 15px;
	border:  #EE504F;
	background-color: #EE504F;
	color: #FFFFFF;
	font-size: 15px;
	width: 90px;
	height: 30px;
	border-radius: 15px;
}

.perlogin-more{
	width: 30px;
	height:30px;
	margin-left: auto;
	margin-right: 8px;
}
/* 云同步和签到 */
.perlogin-firstbox{
	height: 40px;
	width: 100%;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	margin-bottom:10px ;
}
.perlogin-cloud{
	display: flex;
	align-items: center;
	justify-content:center;
	width: 50%;
	border-right: 1px solid #DCDCDC;
	
}
.perlogin-cloud>img{
	height: 20px;
	width: 20px;
	margin-right:3px;
}
.perlogin-cloud>span{
	font-size: 14px;
}
.perlogin-qinadao{
	display: flex;
	align-items: center;
	justify-content:center;
	width: 50%;
}
.perlogin-qinadao>img{
	height: 20px;
	width: 20px;
	margin-right:3px;
}
.perlogin-qinadao>span{
	font-size: 14px;
}

/* 会员中心 我的钱包 我的积分 */
.perlogin-secondbox{
	height: 150px;
	width: 100%;
	margin-bottom: 10px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
}
.perlogin-firstline{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	align-items: center;
}
.perlogin-huiyuan{
	height:20px ;
	width: 20px;
	margin-left: 5px;
	
}
.perlogin-firstline>span{
	font-size: 16px;
	margin-left: 8px;
}
.perlogin-morea{
	height:25px ;
	width: 25px;
	margin-right: 5px;
	margin-left: auto;
	text-align: right;
}
.perlogin-secondline{
	height: 50px;
	width: 100%;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	align-items: center;
}
.perlogin-qianbao{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.perlogin-secondline>span{
	font-size: 16px;
	margin-left: 8px;
}
.perlogin-thirdline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
}
.perlogin-jingxuan{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.perlogin-thirdline>span{
	font-size: 16px;
	margin-left: 8px;
}

/* 主题皮肤 心愿存钱 周期记账 */
.perlogin-thirdbox{
	height: 150px;
	width: 100%;
	margin-bottom: 10px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
}
.perlogin-fourthline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #DCDCDC;
}
.perlogin-pifu{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.perlogin-fourthline>span{
	font-size: 16px;
	margin-left: 8px;
}
.perlogin-fifthline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #DCDCDC;
}
.perlogin-cunqian{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.perlogin-fifthline>span{
	font-size: 16px;
	margin-left: 8px;
}
.perlogin-sixthline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
}
.perlogin-jzhouq{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.perlogin-sixthline>span{
	font-size: 16px;
	margin-left: 8px;
}

/* 帮助与反馈 爱的鼓励 */
.perlogin-fourthbox{
	height: 100px;
	width: 100%;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
	margin-bottom: 60px;
}
.perlogin-seventhline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #DCDCDC;
}
.perlogin-fankui{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.perlogin-seventhline>span{
	font-size: 16px;
	margin-left: 8px;
}
.perlogin-eighthline{
	height: 50px;
	width: 100%;
	display: flex;
	align-items: center;
}
.perlogin-guli{
	height:20px ;
	width: 20px;
	margin-left: 5px;
}
.perlogin-eighthline>span{
	font-size: 16px;
	margin-left: 8px;
}


</style>
